<template>
  <div class="index">
    <div class="left">
      <div class="top">
        <div class="top_one">
          <img src="" alt="" />
          <span>长宁</span>
        </div>
        <div class="top_two">
          <img src="" alt="" />
          <span>多云</span>
          <span>14℃</span>
        </div>
        <div class="top_three">2021-6-27 10:48:52</div>
      </div>
      <div class="list">
        <div class="listLeft">
          <div class="list_one">
            案件热点全方位掌握
            <div class="list_one1">
              <CaseAnalysis1></CaseAnalysis1>
              <CaseAnalysis2></CaseAnalysis2>
              <div class="caseHot">案件热点分析</div>
              <CaseAnalysis3></CaseAnalysis3>
            </div>
          </div>
          <div class="list_two">
            <ul>
              <li
                v-for="(item, i) in liArr"
                :key="i"
                :class="isBg == item.name ? 'bg1' : 'bg'"
                @click="changebg(item.name)"
              >
                {{ item.name }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="listRight">
      <div class="listRight_left">
        <ul>
          <li
            :class="isBig == '网格关闭' ? 'big1' : 'big'"
            @click="chengeBig('网格关闭')"
          >
            网格关闭
          </li>
          <li
            :class="isBig == '2D地图切换' ? 'big1' : 'big'"
            @click="chengeBig('2D地图切换')"
          >
            2D地图切换
          </li>
          <li
            :class="isSmall == '案件过程可查' ? 'small1' : 'small'"
            @click="chengeSmall('案件过程可查')"
          >
            案件过程可查
          </li>
          <li
            :class="isSmall == '案件结果可见' ? 'small1' : 'small'"
            @click="chengeSmall('案件结果可见')"
          >
            案件结果可见
          </li>
          <li
            :class="isSmall == '案件来源可塑' ? 'small1' : 'small'"
            @click="chengeSmall('案件来源可塑')"
          >
            案件来源可塑
          </li>
        </ul>
      </div>
      <div class="listRight_right">
        <div class="listRight_right_one">
          <div
            :class="isBig == '智慧调度' ? 'big1' : 'big'"
            @click="chengeBig('智慧调度')"
          >
            智慧调度
          </div>
          <div
            :class="isBig == '决策分析' ? 'big1' : 'big'"
            @click="chengeBig('决策分析')"
          >
            决策分析
          </div>
        </div>
        <div class="listRight_right_two">
          <div class="right_two1">
            案件结果可查
            <div class="list_one1">
              <CaseAnalysis4></CaseAnalysis4>
              <CaseAnalysis5></CaseAnalysis5>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import CaseAnalysis1 from "@/caseAnalysis/components/caseAnalysis1";
import CaseAnalysis2 from "@/caseAnalysis/components/caseAnalysis2";
import CaseAnalysis3 from "@/caseAnalysis/components/caseAnalysis3";
import CaseAnalysis4 from "@/caseAnalysis/components/caseAnalysis4";
import CaseAnalysis5 from "@/caseAnalysis/components/caseAnalysis5";
export default {
  components: {
    CaseAnalysis1,
    CaseAnalysis2,
    CaseAnalysis3,
    CaseAnalysis4,
    CaseAnalysis5,
  },
  data() {
    return {
      liArr: [
        {
          name: "公众反馈多渠道统计",
        },
        {
          name: "执法工作多纬度统计",
        },
        {
          name: "案件热点全方位统计",
        },
      ],
      isBg: "公众反馈多渠道统计",
      isSmall: "案件过程可查",
      isBig: "",
    };
  },
  methods: {
    changebg(val) {
      this.isBg = val;
    },
    chengeBig(val) {
      this.isBig = val;
    },
    chengeSmall(val) {
      this.isSmall = val;
    },
  },
};
</script>
<style lang="scss" scoped>
.index {
  background: #0e1525;
  color: #fff;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  .left {
    margin-left: 15px;
    .top {
      display: flex;
      margin-top: 10px;
      .top_one {
        padding-right: 10px;
        border-right: 1px solid #ccc;
      }
      .top_two {
        padding: 0 10px;
        border-right: 1px solid #ccc;
      }
      .top_three {
        padding: 0 10px;
      }
    }
    .list {
      margin-top: 20px;
      .listLeft {
        display: flex;
        .list_one {
          .list_one1 {
            background: #0e1525;
            width: 600px;
            .caseHot {
              color: #fff;
            }
          }
        }
        .list_two {
          display: flex;
          align-items: flex-end;
          ul {
            width: 160px;
            list-style: none;
            .bg {
              background: url("../assets/dapin/2/btn.png") no-repeat;
              background-size: 160px 36px;
              height: 36px;
              width: 160px;
              display: flex;
              justify-content: center;
              align-items: center;
              cursor: pointer;
              margin-bottom: 10px;
            }
            .bg1 {
              background: url("../assets/dapin/2/btnSure.png") no-repeat;
              background-size: 160px 36px;
              height: 36px;
              width: 160px;
              display: flex;
              justify-content: center;
              margin-bottom: 10px;
              align-items: center;
              cursor: pointer;
              color: #45adbd;
            }
          }
        }
      }
    }
  }
  .listRight {
    display: flex;
    margin-left: 55px;
    height: auto;
    .listRight_left {
      display: flex;
      align-items: flex-end;
      width: 180px;
      margin-right: 20px;
      margin-bottom: 50px;
      ul {
        list-style: none;
        width: 180px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        .big {
          background: url("../assets/dapin/2/btn.png") no-repeat;
          background-size: 120px 26px;
          margin-top: 10px;
          width: 120px;
          height: 26px;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
        }
        .big1 {
          background: url("../assets/dapin/2/btnSure.png") no-repeat;
          background-size: 120px 26px;
          margin-top: 10px;
          width: 120px;
          height: 26px;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          color: #45adbd;
        }
        .small {
          background: url("../assets/dapin/2/btn.png") no-repeat;
          background-size: 180px 36px;
          margin-top: 20px;
          width: 180px;
          height: 36px;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
        }
        .small1 {
          background: url("../assets/dapin/2/btnSure.png") no-repeat;
          background-size: 180px 36px;
          margin-top: 20px;
          width: 180px;
          height: 36px;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          color: #45adbd;
        }
      }
    }
    .listRight_right {
      flex: 1;
      .listRight_right_one {
        width: 100%;
        display: flex;
        margin-top: 15px;
        justify-content: flex-end;
        align-items: flex-end;
        .big {
          background: url("../assets/dapin/2/btn.png") no-repeat;
          margin-top: 10px;
          background-size: 120px 26px;
          width: 120px;
          height: 26px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: 10px;
          cursor: pointer;
        }
        .big1 {
          background: url("../assets/dapin/2/btnSure.png") no-repeat;
          margin-top: 10px;
          background-size: 120px 26px;
          width: 120px;
          height: 26px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: 10px;
          cursor: pointer;
          color: #45adbd;
        }
      }
    }
  }
}
</style>


